<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <!--[if lt IE 9]>

        <![endif]-->
    </head>
    <body>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script type="text/html" id="toolbarDemo">

        <div class="demoTable">

            <div class="layui-inline">

                <input class="layui-input" name="ename" id="demoReload" autocomplete="off"  placeholder ="请输入姓名">
            </div>
            <button class="layui-btn"  id="btnserach" lay-event="reload"  > 搜索</button>

            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>

        </div>

    </script>
    <div id="updatediv" style="display: none">
        <form class="layui-form" action="" lay-filter="formTest">

            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="ename" required lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="esex" required lay-verify="required"
                          autocomplete="off" class="layui-input" value="男" title="男" value="男">
                    <input type="radio" name="esex" required lay-verify="required"
                           autocomplete="off" class="layui-input" value="女" title="女">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">入职时间</label>
                <div class="layui-input-inline">
                    <input type="date" name="eentrytime" required lay-verify="required"
                           placeholder="yyyy-MM-dd " autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">电话号</label>
                <div class="layui-input-block">
                    <input type="text" name="ephone" required lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                    <input type="text" name="edept" required lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-block">
                    <input type="text" name="ebirthday" required lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">住址</label>
                <div class="layui-input-block">
                    <input type="text" name="eadress" required lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">员工工资</label>
                <div class="layui-input-block">
                    <input type="text" name="epay" required lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">员工邮编号</label>
                <div class="layui-input-block">
                    <input type="text" name="epost" required lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1">
                    <p id="demoText"></p>
                </div>
            </div>
            <input id="ad" name="eimage" class="layui-input"/>


            <input type="hidden" name="eid" >

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>
    </div>

    <table class="layui-hide" id="test" lay-filter="test"></table>

    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

    <script>

        layui.use(['table','form','upload'], function(){
            var table = layui.table;
            var $ = layui.$;
            var form = layui.form;
            var $ =layui.jquery
                ,upload = layui.upload;
            var depttab = table.render({
                elem: '#test'
                ,url:'../emp/showall'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                    {field:'eid', title: 'eid', sort: true,type: "numbers"}
                    ,{field:'ename', title: 'ename'}
                    ,{field:'esex', title: 'esex', sort: true}
                    ,{field:'eentrytime', title: 'eentrytime', sort: true}
                    ,{field:'ephone', title: 'ephone', sort: true}
                    ,{field:'edept', title: 'edept', sort: true}
                    ,{field:'ebirthday', title: 'ebirthday', sort: true}
                    ,{field:'eadress', title: 'eadress', sort: true}
                    ,{field:'epay', title: 'epay', sort: true}
                    ,{field:'epost', title: 'epost', sort: true}
                    ,{field:'eimage', title: '图片',style:'height:100px',width:'10%',templet:'<div><img src="{{d.eimage}}" ></div>'}
                    ,{fixed: 'right', title:'操作',style:'height:100px',width:'10%', toolbar: '#barDemo', width:150}
                ]]
                ,page:true
                ,done: function(res, curr, count){
                    $("#demoReload").val(res.ename);
                }
            });


            var uploadInst = upload.render({
                elem: '#test1'
                ,url: '../upload/tu'
                ,field:'file'
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                ,done: function(res, index, upload){
                    //如果上传失败
                    if(res.code > 0){
                        return layer.msg('上传失败',{icon: 5});

                    }else{
                        $('#ad').val(res.path);
                        return layer.msg('上传成功',{icon: 6});

                    }

                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){

                    }); uploadInst.upload();
                }
            });



            table.on('toolbar(test)', function(obj){
                if(obj.event === "add"){
                    form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                         "eid": ""
                        ,"ename": ""
                        ,"esex": ""
                        ,"eentrytime": ""
                        ,"ephone": ""
                        ,"edept": ""
                        ,"ebirthday": ""
                        ,"eadress": ""
                        ,"epay": ""
                        ,"epost": ""
                        ,"eimage": ""

                    });
                    var addlayer = layer.open({
                        type: 1
                        ,anim: 3
                        ,content: $('#updatediv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                    form.on('submit(formDemo)',function (data){
                        layer.close(addlayer);
                        $.ajax({
                            url:"../emp/add"
                            ,type:"post"
                            ,data: data.field
                            ,success:function (d){
                                console.log(d,typeof(d));
                                if(d === 1){
                                    layer.msg('添加成功！！！', {
                                        icon: 1,
                                        time: 1500 //2秒关闭（如果不配置，默认是3秒）
                                    }, function(){
                                        //更新表格
                                        depttab.reload();
                                    });
                                }


                            }
                        });
                        return false;



                    });
                }
                else if(obj.event==="reload"){
                    console.log(encodeURIComponent($('#demoReload').val()));
                    depttab.reload({
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            ename: $('#demoReload').val()
                            // type:"post"
                        }
                    });
                }
            });

            table.on('tool(test)', function(obj){
                var data = obj.data;
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        //obj.del();
                        $.ajax({
                            url:'../emp/delete/'+data.eid,
                            type:'delete',
                            success:function (d){
                                if(d === 1){
                                    layer.msg('删除已成功！！！', {
                                        icon: 1,
                                        time: 1500 //2秒关闭（如果不配置，默认是3秒）
                                    }, function(){
                                        //更新表格
                                        depttab.reload({
                                            page: {
                                                curr: 1 //重新从第 1 页开始
                                            }
                                            ,where: {
                                                ename: null
                                            }
                                        });

                                    });
                                }

                            }
                        });

                    });
                }else if(obj.event === 'edit'){
                    var uplayer = layer.open({
                        type: 1
                        ,anim: 3
                        ,content: $('#updatediv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });

                    //form自动赋值
                    form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值

                        "eid": data.eid
                        ,"ename": data.ename
                        ,"esex": data.esex
                        ,"eentrytime": data.eentrytime
                        ,"ephone": data.ephone
                        ,"edept": data.edept
                        ,"ebirthday": data.ebirthday
                        ,"eadress": data.eadress
                        ,"epay": data.epay
                        ,"epost": data.epost
                        ,"eimage": data.eimage,
                    });

                    //提交
                    form.on('submit(formDemo)',function (data){
                        layer.close(uplayer);
                        $.ajax({
                            url:"../emp/update"
                            ,type:"post"
                            ,data:data.field  //????没懂为啥传这个"field"
                            ,success:function (d){
                                console.log(d,typeof(d));
                                if(d === 1){
                                    layer.msg('修改已成功！！！', {
                                        icon: 1,
                                        time: 1500 //2秒关闭（如果不配置，默认是3秒）
                                    }, function(){
                                        //更新表格
                                        depttab.reload();
                                    });
                                }
                                else if(d === 0){
                                    layer.msg('修改失败，不能修改id，请重新修改',{
                                        icon: 1,
                                        time: 1500});
                                }
                            }
                        });
                        return false;
                    });
                }
            });
        });

    </script>

    </body>
</html>